<!-- 隐患工单 -->
<template>
	<view class="page">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block style="color: #777777;font-size: 32rpx;" slot="content">隐患工单</block>
		</cu-custom>
		<yu-datetime-picker @confirm="onConfirm" startYear="2015" ref="dateTime" :value="dateValue"
			:isAll="true" :current="false"></yu-datetime-picker>

		<view class="input1" @click="toggleTab()">
			<view class="fkms_label">整改时间</view>
			<view  class="cc">{{time}}</view>
		</view>

		<view class="input2">
			<view class="fkms_label">反馈描述</view>
			<textarea v-model="content" class="fkms" maxlength="-1"></textarea>
		</view>

		<view class="padding flex flex-direction my-position">
			<button class="cu-btn margin-tb-sm lg my-btn" @tap="submit">确认提交</button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<message />
	</view>
</template>

<script>
	import yuDatetimePicker from "@/components/yu-datetime-picker/yu-datetime-picker.vue"
	import {
		formatDate
	} from '@/common/formatDate.js'

	export default {
		components: {
			yuDatetimePicker
		},
		onLoad(option) {
			this.ucId = option.ucId
		},
		mounted() {
			// inputmode="none" 
			this.$el.querySelector('#time').setAttribute('inputmode', 'none')
		},
		data() {
			return {
				time: '',
				content: '',
				ucId: '',
				dateValue: formatDate(new Date())
			}
		},
		methods: {
			submit() {
				let that = this
				if (this.time == "" || this.content == "") {
					uni.showToast({
						title: "反馈不完整"
					})
					return;
				}
				let params = {
					"feedbackTime": this.time,
					"feedbackRemark": this.content,
					"ucId": this.ucId
				}
				let app = getApp()
				app.globalData.request({
					url: 'wx/inHiddenDanger/reportRectificationTime',
					data: params
				}).then(function(res) {
					let data = res.data.code
					if (data == 0) {
						that.$refs.uToast.show({
							message: "反馈成功",
							type: 'success',
							complete() {
								uni.navigateBack({
									delta: 2
								})
							}
						})
					}

				}).catch(function(e) {})
			},
			onConfirm(e) {
				this.time = e.selectRes
			},
			toggleTab(item, index) {
				this.$refs.dateTime.show();
			},
		}
	}
</script>

<style scoped>
	.page {
		width: 100vw;
	}

	.input1 {
		display: flex;
	}

	.input1 input {
		width: 80%;
		height: 80rpx;
		margin: 20rpx 0 0 10rpx;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(143, 143, 143, 0.50);
		border-radius: 8rpx;
		padding: 2rpx 4rpx;
	}
	
	.cc{
		width: 80%;
		height: 80rpx;
		line-height: 80rpx;
		margin: 20rpx 0 0 10rpx;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(143, 143, 143, 0.50);
		border-radius: 8rpx;
		padding: 2rpx 4rpx;
	}

	.input2 {
		display: flex;
	}

	.fkms_label {
		font-size: 24rpx;
		color: #999999;
		margin: 20rpx 20rpx;
	}

	.fkms {
		height: 334rpx;
		width: 80%;
		margin: 20rpx 0 0 10rpx;
		background: #FFFFFF;
		box-shadow: 0 0 4px 0 rgba(143, 143, 143, 0.50);
		border-radius: 5px;
		outline: none;
		padding: 5rpx 10rpx;
	}

	.my-position {
		/* 		width: 100%;
		position:absolute;
		bottom: 220rpx; */
	}

	.my-btn {
		height: 94rpx;
		background-image: linear-gradient(90deg, #FAB53A 4%, #EFA21A 99%);
		box-shadow: 0 0 12px 0 rgba(250, 181, 58, 0.50);
		border-radius: 24px;
		ont-family: PingFangSC-Medium;
		color: #FFFFFF;
	}
</style>
